<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body,
        html {
            background-color: #000;
            color: white;
            padding: 0;
            margin: 0;
            font-family: sans-serif;
            overflow: hidden;
            height: 100%;
            width: 100%;
        }

        .pause:checked ~ .root:hover,
        .pause:checked ~ .root .d:hover {
            animation-play-state: paused !important;
            background: rgba(0, 153, 153, 0.7);
            box-shadow: 0 0 1px 5px rgba(77, 255, 255, 0.9), 0 0 5px 7px black;
        }

        .init:active ~ .root,
        .init:active ~ .root .d {
            animation-play-state: paused !important;
            animation: none !important;
            transition: transform 0.5s ease-out;
            background: rgba(153, 0, 77, 0.7);
            box-shadow: 0 0 1px 5px rgba(255, 77, 166, 0.9), 0 0 5px 7px black;
        }

        .d {
            display: block;
            border-radius: 100px;
            background: rgba(38, 0, 153, 0.7);
            box-shadow: 0 0 1px 5px rgba(121, 77, 255, 0.9), 0 0 5px 7px black;
            width: 100px;
            height: 14px;
            position: absolute;
            margin-left: -14px;
            animation-name: rot;
            animation-duration: 10s;
            animation-delay: 0.5s;
            animation-iteration-count: infinite;
            animation-direction: normal;
            transform-origin: 7px 7px;
            animation-timing-function: cubic-bezier(0.75, -0.35, 0.25, 1.35);
            animation-play-state: running !important;
            transition: background-color 3s, box-shadow 0.3s;
        }

        .d.root {
            top: 50%;
            left: 50%;
        }

        .d.root .d {
            top: 0;
            left: 100%;
            /* don't works :( */

            width: 93%;
            animation-duration: calc(inherit / 2);
        }

        .d:empty:after,
        .d:before {
            content: '';
            display: block;
            width: 7px;
            height: 7px;
            background: white;
            overflow: hidden;
            position: absolute;
            top: 3.5px;
            border-radius: 100%;
        }

        .d:before {
            left: 3.5px;
        }

        .d:empty:after {
            right: 3.5px;
        }

        @keyframes rot {
            0% {
                transform: rotate(0turn);
            }
            33.33333% {
                transform: rotate(0.1667turn);
            }
            66.66667% {
                transform: rotate(0.75turn);
            }
            100% {
                transform: rotate(1turn);
            }
        }

        .d1 {
            animation-duration: 12.78s !important;
        }

        .d2 {
            animation-duration: 7.43s !important;
            animation-direction: reverse;
        }

        .d3 {
            animation-duration: 10.32s !important;
        }
    </style>
</head>
<body>
<h1>Nested divs animated by CSS</h1>
<input id="pause" type="checkbox" checked="checked" class="pause"/>
<label for="pause">Pause on hover</label>
<br/>
<input type="button" value="init" class="init"/>

<div class="d d1 root"><b class="d d2"><b class="d d3"><b class="d d1"><b class="d d2"><b class="d d3"><b
        class="d d1"><b class="d d2"><b class="d d3"><b class="d d1"><b class="d d2"><b class="d d3"><b class="d d1"><b
        class="d d2"><b class="d d3"><b class="d d1"></b></b>
</b>
</b>
</b>
</b>
</b>
</b>
</b>
</b>
</b>
</b>
</b>
</b>
</b>
</div>
</body>
</html>